'use strict';
import React from 'react';
import {Button,Modal,Input} from 'react-bootstrap';

export default class TypeList extends React.Component{
	componentDidMount(){
		this.loadData();
	}

	loadData(){
		var self = this;
		$.ajax({
            url:'/api/queryExamType',
            type:'get',
            dataType:'json',
            success:function(data){
                console.log(data);
                self.setState({list:data});
            }
        });
	}

	close(){
		this.setState({showModal:false,cur:{},index:-1});
	}

	open(){
		this.setState({showModal:true});
	}

	update(ind){
		this.state.cur = this.state.list[ind];
		this.state.index = ind;
		this.setState({showModal:true});
	}

	confirm(){
		var self = this, type = self.state.index === -1  ? 'add' : 'upd';
		var param ={
			typeId : this.refs.typeID.getValue(),
			typeName : this.refs.typeName.getValue(),
			typeDesc : this.refs.typeDesc.getValue(),
			type: type
		};
		console.log(param);
		$.ajax({
            url:'/api/addExamType',
            type:'post',
            data:param,
            dataType:'json',
            success:function(data){
                if(data.flag){
                	type == 'add' ? self.state.list.push(data.res) : self.state.list[self.state.index] = param;
                	self.setState({showModal:false});
                }else{
                	alert(data.info);
                }
            }
        });
	}
	constructor(props){
		super(props);
		this.state = {list:[],showModal:false,cur:{},index:-1};
	}

	render(){
		var self=this, list = _.map(this.state.list,function(cur,index){
			return <tr key={'tr_'+index}>
						<td>{cur.typeId}</td>
						<td>{cur.typeName}</td>
						<td>{cur.typeDesc}</td>
						<td>
							<Button bsStyle="primary" onClick={self.update.bind(self,index)}>修改</Button>
						</td>
					</tr>;
		});
		return(
			<div className = "row">
				<div className="panel panel-default">
				  <div>
				  <Button bsStyle="primary" onClick={this.open.bind(this)}>新增题型</Button>
				  </div>
				  <div className="panel-body">
				  <table className="table table-hover table-striped">
				  	<thead>
				  		<tr>
				  			<th>ID</th>
					  		<th>名称</th>
					  		<th>类型</th>
					  		<th>操作</th>
				  		</tr>
				  	</thead>
				  	<tbody>
				  		{list}
				  	</tbody>
				  </table>
				  </div>
				</div>
				<Modal show={this.state.showModal} onHide={this.close.bind(this)}>
					<Modal.Header>
						<Modal.Title>新增题型</Modal.Title>
					</Modal.Header>
					<Modal.Body>
						<form className="form-horizontal">
							<Input type="text" disabled={!_.isEmpty(this.state.cur)} defaultValue={this.state.cur.typeId} ref="typeID"  label="类型ID" labelClassName="col-xs-2" wrapperClassName="col-xs-10"/>
							<Input type="text" defaultValue={this.state.cur.typeName}  ref="typeName" label="类型名称" labelClassName="col-xs-2" wrapperClassName="col-xs-10"/>
							<Input type="textarea" defaultValue={this.state.cur.typeDesc} ref="typeDesc" label="类型描述" labelClassName="col-xs-2" wrapperClassName="col-xs-10"/>
						</form>
					</Modal.Body>
					<Modal.Footer>
						<Button bsStyle="primary" bsSize="large" onClick={this.confirm.bind(this)}>确认</Button>
						<Button bsStyle="warning" bsSize="large" onClick={this.close.bind(this)}>关闭</Button>
					</Modal.Footer>
				</Modal>
			</div>
		);
	}
}